<template>
	<view class="my-info">
		<view class="avatar">
			<image :src="imgArr" mode="aspectFill" style="position: relative;"></image>
			<image src="../../static/图片上传.png" mode="aspectFill"
				style="width: 60rpx;height: 60rpx;position: absolute;left: 430rpx;top: 180rpx;opacity: 0.9;"
				@click="upload()">
			</image>
		</view>
		<view class="content">
			<view class="myitem">
				<van-cell-group>
					<u-cell-item :border-bottom="border" :title-style="style" title="用户ID" value="1840129210" :arrow="false"></u-cell-item>
					<u-cell-item :border-bottom="border" :title-style="style" title="昵称" @click="chooseName()" :value="name"></u-cell-item>
					<u-cell-item :border-bottom="border" :title-style="style" title="性别" @click="chooseSex()" :value="sex"></u-cell-item>
					<u-cell-item :border-bottom="border" :title-style="style" title="生日" @click="chooseBirthday()" :value="birthday">
					</u-cell-item>
					<u-cell-item :border-bottom="border" :title-style="style" title="所在地" @click="chooseRegion()" :value="region"></u-cell-item>
				</van-cell-group>
			</view>

			<view class="myitem">
				<u-cell-item :border-bottom="border" :title-style="style" title="手机号" value="188*****4652"></u-cell-item>
				<u-cell-item :border-bottom="border" :title-style="style" title="第三方应用"></u-cell-item>
			</view>


			<button type="default" class="mybutton">退出登录</button>
			<button type="default" class="mybuttonb" style="margin-bottom: 0;">注销账号</button>
		</view>
		<!-- 昵称修改 -->
		<u-modal v-model="nameShow"  :mask-close-able="true" title="修改昵称" @confirm="getName()" :title-style="tstyle" width="91%" :confirm-style="cstyle" confirm-text="保存">
			<input type="text" v-model="iname"  class="myinput"/>
		</u-modal>
		
		<!-- 性别弹出选项框 -->
		<u-action-sheet border-radius="30" :list="list" v-model="sexShow" safe-area-inset-bottom="true"
			:cancel-btn="true" @click="click()"></u-action-sheet>

		<!-- 生日弹出选项框 -->
		<u-picker mode="time" v-model="birthdayShow" :params="timeParams" @confirm="getBirthday()"
			:default-time="startDay"></u-picker>

		<!-- 地区弹出选择框 -->
		<u-picker mode="region" v-model="regionShow" :params="regionParams" @confirm="getRegion()"
		:defaultRegion="startRegion"
		></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				border: false,
				name:"TheV21",
				iname:'',
				nameShow:false,
				fileList: [],
				list: [{
						text: '男',
						fontSize: 32
					},
					{
						text: '女',
						fontSize: 32
					}
				],
				regionParams:{
					province: true,
					city: true,
					area: false
				},
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				sexShow: false,
				birthdayShow: false,
				regionShow:false,
				imgArr: ['../../static/fish.jpg'],
				style: {
					'font-size': '26rpx',
					'font-weight': 'bold'
				},
				cstyle: {
				'color':'#928cd6',
				'font-size': '28rpx',
				'font-weight':'bold'
				},
				tstyle: {
				'color':'#928cd6',
				'font-size': '28rpx',
				'font-weight':'bold'
				},
				sex: "未选择",
				birthday: '未选择',
				region:"未选择",
				startDay: '2000-01-03',
				startRegion: ['广东省', '广州市'],
			}
		},
		methods: {
			onLoad(){
				this.iname=this.name
			},
			
			chooseSex() {
				this.sexShow = true
			},

			getBirthday(e) {
				this.birthday = `${e.year}-${e.month}-${e.day}`
				this.startDay = `${e.year}-${e.month}-${e.day}`
			},

			chooseName(){
				this.nameShow=true
			},

			chooseBirthday() {
				this.birthdayShow = true
			},
			
			getName(){
				this.name=this.iname
			},
			
			getRegion(e) {
				console.log(e)
				if(e.city.label=="市辖区" ||e.city.label=="县"){
					this.region=e.province.label
					this.startRegion=[e.province.label, e.city.label]
				}else{
					this.region=e.city.label
					this.startRegion=[e.province.label, e.city.label]	
				}
			},
			
			
			chooseRegion() {
				this.regionShow = true
			},

			click(index) {
				this.sex = this.list[index].text
			},

			upload() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.imgArr = res.tempFilePaths
						console.log(this.imgArr)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-info {
		background: rgba(224, 226, 252, 0.6);
		min-height: 100vh;
		height: auto;
		padding-bottom: 30rpx;
	}

	.avatar {
		height: 300rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		margin: 40rpx 30rpx 0;
	}

	.avatar>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
	}

	.myitem {
		background-color: #ffffff;
		width: 100%;
		padding: 18rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
		background-size: 100% 100%;
	}

	.mybutton {
		background-color: #ffffff;
		width: 100%;
		height: 90rpx;
		font-size: 27rpx;
		color: #928cd6;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}

    .myinput{
		background-color: #ffffff;
		width: 80%;
		height: 120rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #928cd6;
		border-radius: 40rpx;
		box-sizing: border-box;
		margin: 50rpx auto;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}

	.mybuttonb {
		background-color: #ffffff;
		width: 100%;
		height: 90rpx;
		font-size: 27rpx;
		color: #c65c69;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}
</style>
